<template>
    <div id="header">
        <el-row >
            <el-col :span="6"><div class="system-functions"><system-functions></system-functions></div></el-col>
            <el-col :span="12"><div class="system-name"><h1>智能监控系统</h1></div></el-col>
            <el-col :span="6"><div class="system-time">{{ date | timeFormat }}</div></el-col>
        </el-row>
    </div>
</template>

<script>
import SystemFunctions from "./SystemFunctions"
export default {
    components: {
        SystemFunctions
    },
    data() {
        return {
            date: new Date(),
        };
    },
    methods: {},
    mounted() {
        let that = this;
        this.timer = setInterval(function () {
            that.date = new Date();
        });
    },
    beforeDestroy: function () {
        if (this.timer) {
            clearInterval(this.timer);
        }
    },
    filters: {
        timeFormat: function (value) {
            let date = new Date(value);
            let y = date.getFullYear();
            let MM = date.getMonth() + 1;
            MM = MM < 10 ? "0" + MM : MM;
            let d = date.getDate();
            d = d < 10 ? "0" + d : d;
            let h = date.getHours();
            h = h < 10 ? "0" + h : h;
            let m = date.getMinutes();
            m = m < 10 ? "0" + m : m;
            let s = date.getSeconds();
            s = s < 10 ? "0" + s : s;
            return y + "年" + MM + "月" + d + "日 " + h + ":" + m + ":" + s;
        },
    },
};
</script>

<style scoped>
.system-name h1 {
    margin: 0;
    font-size: 2em;
    font-weight: bolder;
    text-align: center;
    color: white;
    letter-spacing: 1em;
    text-indent: 1em;
}
.system-functions {
    text-align: left;
    padding-top: 10px;
}
.system-time {
    text-align: right;
    padding-top: 10px;
    color: #909399;
}
</style>